import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { Demo6Component } from './demo6/demo6.component';

export const TimePickerConfig = {
  location: 'TimePicker',
  description: `输入或选择时间的组件。`,
  description_en: `Components that enter or select time.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/time-picker/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic usage.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/time-picker/demo6/demo6.component',
      demoTitle: '尺寸大小',
      demoTitle_en: 'Size',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/time-picker/demo2/demo2.component',
      demoTitle: '自定义',
      demoTitle_en: 'Custom',
      demoDescription: '自定义时间面板的头部和底部。',
      demoDescription_en: 'Customize the header and footer of the time panel.',
      // 规范未出，暂时隐藏该DEMO
      devDebug: true,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/time-picker/demo3/demo3.component',
      demoTitle: '显示格式',
      demoTitle_en: 'Display format',
      demoDescription: '通过 lvFormat 属性，可配置时间的显示格式。',
      demoDescription_en: 'The lvformat property allows you to configure the time display format.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/time-picker/demo4/demo4.component',
      demoTitle: '禁用部分时间',
      demoTitle_en: 'Disable',
      demoDescription: '禁用部分时间。推荐使用属性lvReadonly让输入框只读，只能通过下拉面板选择时间，如果要允许输入，请用form实现输入框校验功能。',
      demoDescription_en: '禁用部分时间。推荐使用属性lvReadonly让输入框只读，只能通过下拉面板选择时间，如果要允许输入，请用form实现输入框校验功能。Disable part of the time. You are advised to use the lvInputReadonly attribute to make the text box read-only. You can only select the time from the drop-down list box. If you want to allow the input, use the form to verify the text box.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/time-picker/demo5/demo5.component',
      demoTitle: '指定时区',
      demoTitle_en: 'Specified Time Zone',
      demoDescription: '指定时区获取时间，值为目标时间与格林威治标准时间 (GMT) 的分钟差。',
      demoDescription_en: 'Specifies the time zone. The value is the minute difference between the target time and the GMT.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      name: 'lv-time-picker',
      name_en: 'lv-time-picker',
      selector: 'lv-time-picker',
      snippet: `<lv-time-picker ></lv-time-picker>`,
      api: [
        {
          attribute: 'ngModel',
          type: 'Date',
          default: 'null',
          description: `当前时间，可双向绑定。`,
          description_en: `Current time, can be bound in two directions.`,
        },
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: `输入框大小。`,
          description_en: `Input size.`,
        },
        {
          attribute: 'lvReadonly',
          type: 'boolean',
          default: 'false，lvFormat为Function时，lvReadonly一定为true',
          description: `输入框只读，只能通过下拉面板选择时间，一般配合部分禁用功能进行使用。`,
          description_en: `The text box is read-only. You can select the time only through the drop-down panel. Generally, the text box is used with some disabled functions.`,
          global: true,
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: `是否禁用时间组件。`,
          description_en: `Whether to disable.`,
        },
        {
          attribute: 'lvDisabledHour',
          type: '(hour: number) => boolean',
          default: '--',
          description: `禁用小时。`,
          description_en: `Disabled hours.`,
        },
        {
          attribute: 'lvDisabledMinute',
          type: '(hour: number, minute: number) => boolean',
          default: '--',
          description: `禁用分钟。`,
          description_en: `Disabled minutes.`,
        },
        {
          attribute: 'lvDisabledSecond',
          type: '(hour: number, minute: number, second: number) => boolean',
          default: '--',
          description: `禁用秒。`,
          description_en: `Disabled seconds.`,
        },
        {
          attribute: 'lvShowClear',
          type: 'boolean',
          default: 'true',
          description: `是否显示清除按钮。`,
          description_en: `Whether to display the clear button.`,
          global: true,
        },
        {
          attribute: 'lvNowAsBaseTime',
          type: 'boolean',
          default: 'false',
          description: `是否以当前时间作为基准时间。`,
          description_en: `Whether to use the current time as the reference time.`,
          global: true,
        },
        {
          attribute: 'lvFormat',
          type: 'HH:mm:ss | HH:mm | mm:ss | hh:mm a | hh:mm A | hh:mm:ss a | hh:mm:ss A',
          default: 'HH:mm:ss',
          description: `时间显示格式。`,
          description_en: `Time display format.`,
        },
        {
          attribute: 'lvTimezoneOffset',
          type: 'number',
          default: '--',
          description: `本地时间与格林威治标准时间 (GMT) 的分钟差。`,
          description_en: `Indicates the minute difference between the local time and the Greenwich Mean Time (GMT).`,
          global: true,
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string',
          default: 'HH:mm:ss',
          description: `时间展示输入框的 placeholder 值。`,
          description_en: `Time shows the placeholder value of the input.`,
        },
        {
          attribute: 'lvHeader',
          type: 'TemplateRef',
          default: 'null',
          description: `时间面板的头部自定义模板。`,
          description_en: `Header custom template for time panel.`,
        },
        {
          attribute: 'lvFooter',
          type: 'TemplateRef',
          default: 'null',
          description: `时间面板的底部自定义模板。`,
          description_en: `Footer custom template for time panel.`,
        },
      ],
      event: [
        {
          event: 'lvOpenChange',
          parameter: `boolean`,
          description: '时间面板打开/关闭时的回调函数。',
          description_en: `Callback when time panel is open / close.`,
        },
      ],
    },
  ],
};
